<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>rotate</title>
	<style type="text/css">
		.div {
			position: relative;
			perspective: 1000;
			-webkit-perspective: 1000;
			transform-style: preserve-3d;
		}
		.div1, .div2 {
			position: absolute;
			backface-visibility: hidden;
			display: inline-block;
			width: 200px;
			height: 200px;
			transition: 0.6s;
			text-align: center;
			line-height: 12;
			transform-style: preserve-3d;
		}
		.div1 {
			z-index: 1;
			background-color: yellow;
			transform: rotateY(0deg);
		}
		.div2 {
			background-color: red;
			transform: rotateY(-180deg);
		}
		.div:hover .div1 {
			transform: rotateY(180deg);
		}
		.div:hover .div2 {
			transform: rotateY(0deg);
		}
	</style>
</head>
<body>
	<div class="div">
		<div class="div1">猜</div>
		<div class="div2">中奖</div>
	</div>	
</body>
</html>